<template>
    <div class="el-select el-select--small">
        <div class="select-trigger el-tooltip__trigger el-tooltip__trigger">
            <div :style="{width:(width+'px')}"
                class="el-input el-input--small el-input--suffix">
                <div class="el-input__wrapper" :title="placeholder">
                    <input class="el-input__inner"
                           v-model="modelValue"
                           type="text"
                           readonly=""
                           tabindex="0"
                           :placeholder="placeholder"
                           clearable
                    />
                    <span class="el-input__suffix">
                        <span class="el-input__suffix-inner">
                           <el-icon :size="15"
                                    title="清除"
                                    class="icon_circle"
                                    @click.stop.prevent="circleInputEvent">
                               <ele-CircleClose />
                           </el-icon>
                        </span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import {toRefs} from "vue";
/** 此处引入，支持多个 */
const emit = defineEmits(['update:modelValue','circle'])
/** 定义组件入参 */
const props = defineProps({
    modelValue: String, // 控制显示隐藏
    width: [String,Number],// 宽度
    placeholder: String, // 默认占位提示语
})
const {modelValue, width, placeholder} = toRefs(props)
// 清除事件
const circleInputEvent = () => {
    emit('circle', true)
}
</script>

<style scoped>
.icon_circle{
    display: none;
}
.el-input__wrapper:hover .icon_circle{
    display: inline-block;
}
</style>